<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>水波</title>
	<style>
		body{
			padding: 0;
			margin: 0;
			font-family: 'Microsoft yahei';
		}
		ul{
			width: 300px;
			height: 50px;
			background: #FF9966;
			margin: 40px auto;
			position: relative;
			padding: 0;
		}

		ul li{
			margin: 0;
			padding: 0;
			height: 50px;
			line-height: 50px;
			cursor: pointer;
			list-style-type: none;
			float: left;
			width: 100px;
			border-right: 1px solid #ccc;
			box-sizing: border-box;
			text-align: center;
			position: relative;
			overflow: hidden;
		}

		ul li.bottombar{
			position: absolute;
			height: 4px;
			background: #0066CC;
			bottom: 0;
			left: 0;
		}

		ul li:hover .shadow{
			/*border-radius: 0;
			opacity: .1;
			display: block;
			width: 100px;
			height: 50px;
			left: 0;*/
			-webkit-animation: baidong .6s linear;
		}

		.shadow{
			transition:all .5s;
			position: absolute;
			width: 100px;
			height: 50px;
			left: 0px;
			border-radius: 50%;
			background: #FFF;
			opacity: .5;
			-webkit-transform: scale(0);
			/*width: 0;
			height: 0;*/
			/*display: none;*/
		}

		@-webkit-keyframes baidong {
			100% { opacity: 0;width: 100px;left: 0px; -webkit-transform: scale(2)}
		}
	</style>
</head>
<body>
	<ul>
		<li>
			<div class="shadow"></div>
			Tab One
		</li>
		<li><div class="shadow"></div>Tab Two</li>
		<li><div class="shadow"></div>Tab Three</li>
		<li class="bottombar"></li>
	</ul>
</body>
</html>